<template>
	<view>
		<view class="gallery">
			<view class="gallery-info">
				<view class="gallery-img"><image :src="gallery.galleryImg"></image></view>
				<view class="gallery-text">
					<view style="font-weight: bold;">{{gallery.galleryName}}</view>
					<view style="font-size: 22rpx;">{{gallery.galleryPlace}}</view>
					<view style="font-size: 22rpx;">{{gallery.galleryFans}}粉丝 | {{gallery.galleryAct}}在办</view>
				</view>
				<view class="gallery-att">
					<button>关注</button>
				</view>
			</view>
			<view class="gallery-content">
				<text>最近活动</text>
				<view class="act" >
					<view class="act-each" v-for="item in gallery.act">
						<view class="act-img"><image :src="item.actImg"></image></view>
						<view class="act-name">{{item.actName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['gallery']
	}
</script>

<style lang="scss">
	.gallery{
		margin: 30rpx;
		height: 600rpx;
		box-shadow: 0px 2px 1px rgba(200,200,200,.30);
		border-radius: 30rpx;
		.gallery-info{
			width: 100%;
			height: 180rpx;
			.gallery-img{
				display: inline-block;
				width: 220rpx;
				height: 180rpx;
				image{
					width: 220rpx;
					height: 180rpx;
					border-radius: 30rpx;
				}
			}
			.gallery-text{
				margin-left: 30rpx;
				display: inline-block;
				color: #333333;
				font-size: 30rpx;
				vertical-align: top;
				margin-top: 30rpx;
			}
			.gallery-att{
				display: inline-block;
				vertical-align: top;
				margin-top: 50rpx;
				float: right;
				margin-right: 30rpx;
				button{
					background-color: #B0E3FF;
					border: 1px solid #B0E3FF;
					color: #FFFFFF;
					font-size: 30rpx;
					line-height: 50rpx;
					border-radius: 20rpx;
					height: 50rpx;
				}
			}
		}
		.gallery-content{
			text{
				line-height: 80rpx;
				color: #333333;
			}
			.act{
				display:flex;
				width:100%;
				height: 320rpx;
				// flex-direction: row;
				// overflow-x: scroll;
				// overflow-y: hidden;
				.act-each{
					display: inline-block;
					width: 200rpx;	
					margin-right: 20rpx;
					margin-left: 10rpx;
					.act-img{
						width: 200rpx;
						height: 270rpx;
						image{
							width: 200rpx;
							height: 250rpx;
							border-radius: 30rpx;
						}
					}
					.act-name{
						text-align: center;
						line-height: 40rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
